import * as React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css'
import s from './index.module.scss'
import { Article } from '../../components'
import list from '../../data/article_list'
import {img2,img3,img4,img6,img7,vip} from '../../asstes/find'
import {useNavigate} from 'react-router-dom'
export default function Find() {
   let [index,setIndex] = React.useState(0)
   const style={
      color:'#000',
      fontSize:'18px'
   }
   const to = useNavigate()
   React.useEffect(()=>{

   },[index])
   return (
      <div>
         <div className={s.fix}>
            <div className={s.title}>
               发现
            </div>
            <div className={s.nav}>
               <div className={s.left}  onClick={()=>{setIndex(0)}} style={index===0? style:{}}>
                  推荐
               </div>
               <div className={s.right} onClick={()=>setIndex(1)} style={index===1?style:{}}>
                  支持
               </div>
            </div>
         </div>
         <div className={s.page}>
            <div className={s.swiper}>
               <Swiper  className={s.swiperCom}
                  spaceBetween={0}
                  slidesPerView={1}>
                     <SwiperSlide>
                     <img src={img4} alt="" />
                     </SwiperSlide>
                     <SwiperSlide>
                     <img src={vip} alt="" />
                     </SwiperSlide>
               </Swiper>
               
            </div>
            
             {
                index===0?
                  <div className={s.article}>
                
                     {list.map((item, index) => {
                        return (
                           <div className={s.item} key={Math.random() }   onClick={()=>{to('/find/'+item.id,{state:item})}} >
                           <Article title={item.title}
                              time={item.time}
                              img={item.img}
                              key={index}></Article>
                              </div>
                        )
                     })}
                  
                  </div>
                  :
                  <div className={s.multiple}>
                  <div className={s.title}>
                     近期热门
                  </div>
                  <div className={s.server}>
                     <div className={s.top}>
                           <img src={img3} alt="" />
                           <img src={img7} alt="" />
                     </div>
                     <div className={s.top}>
                           <img src={img2} alt="" />
                           <img src={img6} alt="" />
                     </div>
                  </div>
                  </div>
             }
            
             {/* 第二屏内容 */}
            
         </div>
         
        
         
      </div>
   )
}
